<!DOCTYPE html>
<html>
<head>
<title>Planetary Orbit</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="350"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style Settings ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2.5;
    
    // --- Drawing Parameters ---
    const cx = 250;
    const cy = 150;
    const rx = 180;
    const ry = 90;
    const focusDist = Math.sqrt(rx * rx - ry * ry);
    // Place sun at the right focus to match the diagram
    const sunX = cx + focusDist;
    const sunY = cy;
    const aphelionX = cx - rx;
    const perihelionX = cx + rx;
    // Make vp vector longer than vo vector, to schematically represent that vp > vo
    const vo_len = 40;
    const vp_len = 70;

    // Helper function to draw an arrow
    function drawArrow(fromX, fromY, toX, toY) {
        const headlen = 10;
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // Function to draw text with a subscript
    function drawSubscriptText(text, sub, x, y) {
        ctx.save();
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText(text, x, y);
        const textWidth = ctx.measureText(text).width;
        ctx.font = 'italic 15px Times New Roman';
        ctx.fillText(sub, x + textWidth * 0.8, y + 5);
        ctx.restore();
    }

    // 1. Draw the elliptical orbit
    ctx.beginPath();
    ctx.ellipse(cx, cy, rx, ry, 0, 0, 2 * Math.PI);
    ctx.stroke();

    // 2. Draw the major axis
    ctx.beginPath();
    ctx.moveTo(aphelionX, cy);
    ctx.lineTo(perihelionX, cy);
    ctx.stroke();

    // 3. Draw the Sun (S)
    ctx.beginPath();
    ctx.arc(sunX, sunY, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.font = '20px Times New Roman';
    ctx.textAlign = 'center';
    ctx.fillText('S', sunX, sunY + 25);

    // 4. Draw distance labels Ra and Rp
    const labelY = cy - 15;
    ctx.textAlign = 'left';
    // Ra
    drawSubscriptText('R', 'a', (aphelionX + sunX) / 2 - 10, labelY);
    // Rp
    // The symbol in the image at Rp looks like a rho, but p is more standard and consistent with v_p. We use p.
    drawSubscriptText('R', 'p', (perihelionX + sunX) / 2 - 10, labelY);

    // 5. Draw velocity vectors
    // v_o at aphelion
    const vo_startX = aphelionX;
    const vo_startY = cy;
    const vo_endY = cy - vo_len;
    drawArrow(vo_startX, vo_startY, vo_startX, vo_endY);

    // v_p at perihelion
    const vp_startX = perihelionX;
    const vp_startY = cy;
    const vp_endY = cy + vp_len;
    drawArrow(vp_startX, vp_startY, vp_startX, vp_endY);

    // 6. Draw velocity labels
    // v_o (as per image)
    drawSubscriptText('v', 'o', vo_startX - 35, vo_startY - vo_len / 2);
    // v_p
    drawSubscriptText('v', 'p', vp_startX + 20, vp_startY + vp_len / 2 - 5);
    
    // 7. Draw the figure caption
    ctx.font = '20px Times New Roman';
    ctx.textAlign = 'center';
    ctx.fillStyle = 'black';
    ctx.fillText('Fig. 1.31.', cx, cy + ry + 100);

</script>
</body>
</html>